简单小众电商购物项目模板：基于 Vue 3 和 Vant 4 的纯前端开发方案 |
您所在的位置：网站首页 › vant 模板 › 简单小众电商购物项目模板：基于 Vue 3 和 Vant 4 的纯前端开发方案 |
简单小众电商购物项目模板：基于 Vue 3 和 Vant 4 的纯前端开发方案
|
📈「作者简介」：前端开发工程师 | 蓝桥云课签约作者 | 技术日更博主 | 已过四六级 📚「个人主页」：阿珊和她的猫 🕐「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️） Vue.js 和 Egg.js 开发企业级健康管理项目带你从入门到实战全面掌握 uni-app 简单录制如下
主要练习下界面和交互，顺带简单了解下 vue3 语法。 Vue 3 是一种流行的 JavaScript 框架Vue 3 是一种流行的 JavaScript 框架，用于构建用户界面。它是 Vue.js 框架的最新版本，相较于 Vue 2，Vue 3 引入了一些重大改进和新特性，旨在提供更好的性能、更好的开发体验和更灵活的使用方式。 以下是 Vue 3 的一些关键特性和改进： 1. 更快的渲染性能Vue 3 的响应式系统经过重写，引入了基于 Proxy 的观察机制，提供了更高效的响应式数据追踪和更新。这种新的观察机制能够在访问响应式数据时进行动态跟踪，从而减少了不必要的依赖追踪和更新操作，提高了性能。 2. 更小的包体积Vue 3 使用了模块化的设计方式，使得开发者可以根据需求按需引入需要的功能，从而减小了打包体积。这意味着在项目中可以只使用需要的功能模块，而不必引入整个框架。 3. Composition APIVue 3 引入了 Composition API，这是一个基于函数的 API 风格，提供了更好的代码组织和复用性。Composition API 允许开发者根据逻辑关系将代码组织成功能模块，而不是基于组件的结构。这样，开发者可以更灵活地组织和复用逻辑代码，并在不同组件之间共享逻辑。 4. Teleport 组件Vue 3 引入了 Teleport 组件，它可以在 DOM 树中的任何位置进行组件渲染，而不需要受限于当前组件的父元素。这使得开发者可以更便利地实现弹出框、对话框等需要在 DOM 树中指定位置渲染的功能。 5. 更好的 TypeScript 支持Vue 3 对 TypeScript 提供了更好的支持，包括更强大的类型推导、更准确的类型推断等功能。这使得开发者在使用 TypeScript 开发 Vue 3 应用时能够获得更好的开发体验和类型安全性。 总结来说，Vue 3 带来了更快的渲染性能、更小的包体积、更灵活的组织方式和更好的 TypeScript 支持等改进和新特性。开发者可以通过升级到 Vue 3 或在新项目中使用 Vue 3 来获得这些优势，并享受更好的开发体验和性能提升。 Vant 4 是一套基于 Vue 3 的移动端 UI 组件库Vant 4 是一套基于 Vue 3 的移动端 UI 组件库，它提供了丰富的组件和工具，用于开发具有优秀用户体验的移动应用。Vant 4 是 Vant 组件库的最新版本，相较于 Vant 2，Vant 4 经过重写和升级，采用了 Vue 3 的新特性和优势。 以下是 Vant 4 的一些关键特性和改进： 1. 基于 Vue 3Vant 4 是完全基于 Vue 3 的，利用 Vue 3 的新特性在性能、开发体验和代码组织等方面带来了一些优势。例如，Vant 4 使用了 Vue 3 的 Composition API 来提供更好的代码组织和复用性。 2. 更小的包体积Vant 4 采用了 Tree Shaking 技术，可以按需引入组件，从而减小了打包体积。这样，开发者只需引入需要的组件，而不是全部组件，可以有效地优化应用的性能。 3. 渐进式加载Vant 4 提供了渐进式加载功能，将组件资源进行异步加载，只在需要时再加载相关组件。这样可以减少首次加载的文件大小，加快应用的初始化速度。 4. 插件化设计Vant 4 通过插件化的设计，使得开发者可以自由扩展和自定义组件库的功能和样式。开发者可以根据自身需求创建自定义主题、添加新的组件或修改现有组件的样式和行为。 5. 改进的组件和交互体验Vant 4 在原有的组件基础上进行了升级和改进，提供了更好的交互方式和用户体验。例如，Vant 4 优化了滑块组件的滑动效果、加载更多组件的加载方式等。 总而言之，Vant 4 是基于 Vue 3 的移动端 UI 组件库，具有更小的包体积、渐进式加载、插件化设计和改进的组件和交互体验等特点。通过使用 Vant 4，开发者可以快速构建出具有良好用户体验的移动应用，并享受 Vue 3 带来的性能提升和开发体验的改善。 简单截图如下首页
首页-猜你喜欢
分类
购物车
底部导航文件 {{item.title}} /* eslint-disable */ import { defineComponent, ref, computed } from 'vue' import { useRouter,useRoute } from 'vue-router' export default defineComponent({ setup() { let itemArr = ref([ { title: '首页', navName: 'Index', icon: 'iconfont icon-shouye' }, { title: '分类', navName: 'Classification', icon: 'iconfont icon-fenlei'}, { title: '购物车', navName: 'ShoppingCart', icon: 'iconfont icon-gouwuche' }, { title: '我的', navName: 'Mine', icon: 'iconfont icon-wode' }, ]) let router = useRouter() // 全局路由对象 let route = useRoute() // 当前路由对象 let name = computed(() =>{ return route.name }) let to = (val) =>{ if (val != name.value){ router.replace({ name: val }) } } return { itemArr, name, to } } })分类功能模块 {{item.title}} {{item.title}} /* eslint-disable */ import { defineComponent, ref } from 'vue' import { showToast } from 'vant'; import navCom from '@/components/onlineRetailer/MyNav.vue' export default defineComponent({ name: 'headerCom', components: { navCom }, setup (props,ctx) { let value = ref('') let active = ref(0); // let onChange = (index) => showToast(`标签名 ${index + 1}`); // let onChange = (index) => { // switch(index){ // case 0: showToast('1111111111111') // break; // case 1: showToast('222222222222') // break; // default: showToast('6666666666666') // } // } let leftList = ref([ { index: 0, title: "好货推荐" }, { index: 1, title: "彩妆个护" }, { index: 2, title: "食品饮料" }, { index: 3, title: "鞋履箱包" }, { index: 4, title: "母婴用品" }, { index: 5, title: "生活家居" } ]) let rightList = ref([ { title: '麦菜' }, { title: '芥兰' } ]) let list = ref([ { title: '坚定不移', src: require('@/assets/newProducts/2.jpg')}, { title: '壮志凌云', src: require('@/assets/newProducts/1.jpg')}, { title: '奋发图强', src: require('@/assets/newProducts/3.jpg')}, { title: '坚持不懈', src: require('@/assets/newProducts/4.jpg')}, { title: '朝气蓬勃', src: require('@/assets/newProducts/5.jpg')}, { title: '力争上游', src: require('@/assets/newProducts/6.jpg')}, { title: '坚定不移', src: require('@/assets/newProducts/2.jpg')}, { title: '壮志凌云', src: require('@/assets/newProducts/1.jpg')}, ]); let loading = ref(false); let finished = ref(false); let curNav = ref({ index: 0, }) let changeIndex = (index) =>{ curNav.value.index = index } let onLoad = () => { // 异步更新数据 // setTimeout 仅做示例，真实场景中一般为 ajax 请求 // setTimeout(() => { // for (let i = 0; i < 6; i++) { // list.value.push(list.value.length + 1); // } // 加载状态结束 loading.value = false; console.log('list.value.length',list.value.length) // 数据全部加载完成 if (list.value.length >= 20) { finished.value = true; } // }, 1000); }; return { value, active, // onChange, leftList, rightList, list, onLoad, loading, finished, curNav, changeIndex } } }) 附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）Vue.js 和 Egg.js 开发企业级健康管理项目 带你从入门到实战全面掌握 uni-app |
【本文地址】
今日新闻 |
推荐新闻 |